<template>
  <div>
    <div v-if="type === 'index'" class="label">id</div>
    <div v-else class="label">{{label}}</div>
    <div class="value" v-for="(key,index) in parentList" :key="index">
      <slot :row="key">
        <div v-if="type === 'index'">{{key.index}}</div>
        <div v-else>{{key[prop]}}</div>
      </slot>
    </div>
  </div>
</template>

<script>

export default {
  name: "TableItem",
  props:['prop','label','type'],
  computed:{
    parentList(){
      return this.$parent.myList
    }
  },
  mounted() {
    if(!this.$parent.$vnode.tag.includes('TableList')){
      console.error(`[Vue warn]: 该标签只能在TableList标签内使用。。。`)
    }
  },
  methods:{
  }
}
</script>

<style scoped>
.label{
  padding:16px 16px;
  height: 23px;
  line-height: 23px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
}
.value{
  height: 23px;
  line-height: 23px;
  padding:16px 16px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
}
</style>
